<template>
	<div id="userCenter">
		<el-container style="height: 100vh;">
			<el-header>
				<el-menu
					class="el-menu-demo"
					mode="horizontal"
					background-color="#545c64"
					text-color="#fff"
					router
					active-text-color="#fff">
					<el-menu-item class='abcd'>SUK图床 用户中心</el-menu-item>
					<el-menu-item @click='isCollapse=!isCollapse' v-show='$route.path!=="/explore"' >
						<i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'"></i>
					</el-menu-item>
					<el-menu-item index="/" >首页</el-menu-item>
					<el-submenu index="" v-show='username'>
						<template slot="title">
							<img :src="avator" alt="" class='header-useravator'>
							{{username}}
						</template>
						<el-menu-item @click='goUserInfo'>基本资料</el-menu-item>
						<el-menu-item index="/explore">探索</el-menu-item>
						<el-menu-item @click='goOut()'>安全退出</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-header>
			<el-container>
				<el-aside :width="isCollapse ? '64px' : '200px'" v-show='$route.path!=="/explore"' >
					<el-col>
						<el-menu
							:collapse="isCollapse"
							:default-active="activeIndex"
							class="el-menu-vertical-demo"
							background-color="#545c64"
							text-color="#fff"
							router
							active-text-color="aqua">
							<el-menu-item>
								<el-image :src="avator" @click='lookAvator' :style="{display:isCollapse?'none':'block'}"></el-image>
								<span slot="title">{{username}}</span>
							</el-menu-item>
							<el-menu-item index="/userCenter">
								<i class="el-icon-s-home"></i>
								<span>后台首页</span>
							</el-menu-item>
							<el-menu-item index="/userCenter/myGallery">
								<i class="el-icon-picture"></i>
								<span>我的图库</span>
							</el-menu-item>
							<el-menu-item index="/userCenter/shortUrl">
								<i class="el-icon-s-promotion"></i>
								<span>我的网址</span>
							</el-menu-item>
							<el-menu-item index="/userCenter/personalCenter">
								<i class="el-icon-user-solid"></i>
								<span>个人中心</span>
							</el-menu-item>
							<el-menu-item index="/userManage" v-if='userId==="ht5dX14zczAyV1rnb2MzOT4Y"'>
								<i class="el-icon-s-custom"></i>
								<span>用户管理</span>
							</el-menu-item>
							<el-menu-item index="/imageManage" v-if='userId==="ht5dX14zczAyV1rnb2MzOT4Y"'>
								<i class="el-icon-s-marketing"></i>
								<span>图片管理</span>
							</el-menu-item>
						</el-menu>
					</el-col>
				</el-aside>
				<el-main :class="{'explore': $route.path==='/explore'}">
					<transition name="router-fade" mode="out-in" >
						<keep-alive include="userCenterHome,myGallery,explore">
							<router-view></router-view>
						</keep-alive>  
					</transition>	
				</el-main>
				<el-dialog :visible.sync="showAvator" width="62%" title='用户头像' top='6vh'>
					<img :src="avator" alt="">
				</el-dialog>
			</el-container>
			<!-- <el-footer>Footer</el-footer> -->
		</el-container>
	</div>
</template>
<script>
	export default {
		name:'userCenter',
		data() {
			return {
				activeIndex:'',
				userId:sessionStorage.getItem('id'),
				username:sessionStorage.getItem('name'),
				avator:sessionStorage.getItem('avator'),
				showAvator:false,
				isCollapse:false
			};
		},
		created(){
			this.$bus.$on('changeAvator',(newAvator)=>{
				this.avator=newAvator;
			})
			this.$bus.$on('changeName',(value)=>{
				this.username=value;
			})
		},
		methods: {
			goOut(){
				this.$confirm('你确定要退出登录吗', '提示', {
					confirmButtonText: '确定一定以及肯定',
					cancelButtonText: '再想想',
				}).then(()=>{
					sessionStorage.clear();
					this.$router.push('/');
					this.info('登出成功~~~');
				}).catch(() => {});
			},
			goUserInfo(){
				this.$router.push('/userCenter/personalCenter');
				this.activeIndex=this.$route.path;
			},
			lookAvator(){
				this.showAvator=true;
			}
		},
		beforeRouteEnter (to, from, next) {
			if(to.name!=='explore') next(vm=>{ vm.activeIndex=vm.$route.path; })
			else next();
		},
		destroyed () {
			this.$bus.$off('changeAvator');
			this.$bus.$off('changeName');
		}
		// watch: {
		//     $route: {
		// 	    handler () {    				
		// 	        if (this.$route.name === 'userCenter' ) {
		// 	        	this.getImgCount();
		// 	        }
		// 	    },
		// 	    immediate:true
		//     },
		// }
	}
</script>
<style scoped lang='stylus'>
#userCenter{
	header{
		padding:0;
		.el-menu{
			background: #23262e !important;
			li{
				&:first-child{
					width: 200px;
					cursor: default;
					color:aqua !important;
					font-size: 18px;
				}
				&:last-child{
					float: right;
					margin-right: 1em;
				}
				i{
					font-size:21px;
				}
			}
			>>>li,>>>.el-submenu__title{
				font-size: 16px;
				text-align: center;	
				background-color: transparent !important;	
				&.is-active{
					color:#fff !important;
					border-bottom: none;
				}
				&:hover{
					background-color: #4b5161 !important;
				}
				.el-submenu__title{
					cursor: default;
					&:hover{
						background-color:transparent ;
					}
				}
				.el-submenu__icon-arrow{
					color:#fff;
					font-size: 18px;
					right:0;
					margin-top: -3px;
				}
			}
		}
		.header-useravator{
			width: 2.6rem;
			height: 2.6rem;
			border-radius: 50%;
			margin-right: 1em;
		}
	}
	.el-container{
		height:calc(100% - 60px);
	}
	aside{
		>div{
			height:100%;
		}
		.el-menu{
			height:100%;
			background: #393d49;
			>li:first-child{	
				padding: 2em 20px 10px;
				height: auto;
				span{
					margin-top: 1em;
					line-height: 1.8;
					display: inline-block;
					white-space: normal;
				}
			}
			li{
				text-align:center;
				font-size:15px;
				>>>.el-image__inner{
					width: 6rem;
					height: 6rem;
					border-radius: 50%;
				}
				i{
					font-size:21px;
					margin-bottom: 2px;
				}
			}
		}
	}
	>>>.el-dialog__body {
		text-align: center;
		padding-top: 5px;
		>img{
			max-width: 92%;
			max-height: 80vh;
		}
	}
	>>>.el-menu-item [class='el-icon-circle-close'] {
		font-size: 40px;
		color: red;
	}
	>>> .el-image-viewer__img{
		max-height: 91% !important;
		max-width: 95% !important;
	}
}
</style>